<template>
  <div>
    <vxe-button status="primary" @click="pushEvent">新增（尾部）</vxe-button>
    <vxe-table
      border
      show-overflow
      ref="tableRef"
      :edit-config="editConfig"
      :merge-cells="mergeCells"
      :data="tableData"
    >
      <vxe-column type="seq" width="70"></vxe-column>
      <vxe-column
        field="name"
        title="Name123456"
        :edit-render="{ name: 'input' }"
      ></vxe-column>
      <vxe-column
        field="sex"
        title="Sex"
        :edit-render="{ name: 'input' }"
      ></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
    </vxe-table>
  </div>
</template>

<script setup>
import { ref, nextTick, reactive } from "vue";
import { ElMessage } from "element-plus";
import { merge } from "ant-design-vue/es/theme/util/statistic";
const tableRef = ref();
const tableData = ref([
  {
    id: 10001,
    name: "Test1111",
    role: "Develop",
    sex: "Man",
    age: 28,
    address: "test abc",
  },
  {
    id: 10002,
    name: "Test2",
    role: "Test",
    sex: "Women",
    age: 22,
    address: "Guangzhou",
  },
]);
const mergeCells = ref([{ row: 0, col: 1, rowspan: 2, colspan: 1 }]);
const editConfig = reactive({
  enabled: false, // 是否启用编辑
  trigger: "click",
  mode: "row",
  beforeEditMethod({ row, column, rowIndex, columnIndex }) {
    // Example: Prevent editing on the second row
    if (rowIndex === 1) {
      ElMessage.error("Row 2 is not editable");
      return false;
    }
    return true;
  },
});
const pushEvent = async () => {
  const table = tableRef.value;
  if (table) {
    const newRow = await table.createRow({});
    tableData.value.push(newRow);
    console.log("tableData.value :>> ", tableData.value);
    await nextTick();
    table.setEditCell(newRow, "name");
  }
};

// 通过设置 merge-cells={ row: 第几行开始, col: 第几列开始, rowspan: 合并多少行, colspan: 合并多少列 } 配置合并规则
</script>
